import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import Navigation from './components/Navigation';
import TeamList from './pages/TeamList';
import TeamCreate from './pages/TeamCreate';
import TeamDetailPage from './pages/TeamDetail';
import Dashboard from './pages/Dashboard';
import TelemetryPoints from './pages/TelemetryPoints';
import TelemetryPointDetail from './pages/TelemetryPointDetail';
import Search from './pages/Search';
import DirectoryList from './pages/DirectoryList';
import IntroductionPage from './pages/Introduction';

// 创建带导航的页面包装组件
const withNavigation = (Component: React.ComponentType<any>, title?: string, subtitle?: string) => {
  const WrappedComponent = () => (
    <Navigation title={title} subtitle={subtitle}>
      <Component />
    </Navigation>
  );
  return WrappedComponent;
};

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <Routes>
          {/* 默认路由重定向到仪表板 */}
          <Route path="/" element={<Navigate to="/dashboard" replace />} />

          {/* 分析仪表板路由 */}
          <Route
            path="/dashboard"
            element={React.createElement(withNavigation(Dashboard, '仪表板', 'UMA/UKM 数据概览与分析'))}
          />
          <Route
            path="/analysis/points"
            element={React.createElement(withNavigation(TelemetryPoints, '遥测点管理', '查看和管理所有遥测点'))}
          />
          <Route
            path="/analysis/points/:pointId"
            element={React.createElement(withNavigation(TelemetryPointDetail, '遥测点详情', '查看遥测点详细信息'))}
          />
          <Route
            path="/analysis/directory-list"
            element={React.createElement(withNavigation(DirectoryList, '目录列表', '查看包含遥测点XML文件的目录及其统计信息'))}
          />

          {/* 介绍页面路由 */}
          <Route
            path="/introduction"
            element={React.createElement(withNavigation(IntroductionPage, '技术介绍', '了解UMA和UKM遥测技术'))}
          />
  
          {/* 搜索功能路由 */}
          <Route
            path="/search"
            element={React.createElement(withNavigation(Search, '搜索遥测点', '搜索和发现遥测点'))}
          />

          
  
          {/* 团队管理路由 */}
          <Route
            path="/teams"
            element={React.createElement(withNavigation(TeamList, '团队列表', '管理所有团队'))}
          />
          <Route
            path="/teams/create"
            element={React.createElement(withNavigation(TeamCreate, '创建团队', '创建新的分析团队'))}
          />
          <Route
            path="/teams/:teamId"
            element={React.createElement(withNavigation(TeamDetailPage, '团队详情', '查看和管理团队信息'))}
          />

          
                    <Route path="/teams/:teamId/settings" element={<Navigate to="/teams/:teamId" replace />} />
        </Routes>
      </Router>
    </ConfigProvider>
  );
};

export default App;